<template>
  <!-- 主容器 -->
  <div class="news-container">
    <!-- 左侧新闻列表区域 -->
    <div class="news-list">
      <h1>新闻列表</h1> <!-- 标题 -->
      <ul>
        <!-- 循环渲染新闻列表 -->
        <li v-for="news in newsList" :key="news.id">
          <!-- 路由链接到新闻详情页，此路由定义在后续介绍 -->
          <router-link :to="{ name: 'newsdetails' }">
            {{ news.title }}
          </router-link>
        </li>
      </ul>
    </div>

    <!-- 右侧新闻详情区域 -->
    <div class="news-detail">
      <!-- 嵌套路由出口（显示子路由内容） -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入新闻数据
import { newsList } from '@/data/newsData.ts'
</script>

<style scoped>
/* 整体布局：左右排列 */
.news-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

/* 左侧新闻列表 */
.news-list {
  width: 30%;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.news-list h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.news-list ul {
  list-style: none;
  padding: 0;
}

.news-list li {
  margin-bottom: 10px;
}

.news-list a {
  text-decoration: none;
  color: #0073e6;
  font-weight: bold;
  transition: 0.3s;
}

.news-list a:hover {
  color: #005bb5;
  text-decoration: underline;
}

/* 右侧新闻详情 */
.news-detail {
  width: 70%;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}
</style>